import { RtFrame } from '@dpa/react-frame-intro';
import { RtAvatar } from '@dpa/react-avatar';
import { RtText } from '@dpa/react-text';

export function AvatarPage() {
  return (
    <RtFrame
      as="div"
      surface="foundation-pure"
      modifier="base"
      use="foggy"
      style={{
        minHeight: '100vh',
        padding: '40px',
      }}
    >
      <RtFrame
        as="div"
        use="achromatic-cloudy"
        surface="foundation-pure"
        modifier="base"
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
          borderRadius: '10px',
          padding: '24px',
        }}
      >
        <RtText typography="title-md-medium">Rt Checkbox</RtText>

        <RtText typography="title-md-medium">Size</RtText>
        <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
          <RtAvatar
            contentType="figure"
            username="abc 332"
            use="primary"
            size="sm"
          />
          <RtAvatar
            contentType="figure"
            username="abc 332"
            use="secondary"
            size="md"
          />
          <RtAvatar
            contentType="figure"
            username="abc 332"
            use="tertiary"
            size="lg"
          />
          <RtAvatar
            contentType="letters"
            username="abc 332"
            use="primary"
            size="sm"
          />
          <RtAvatar
            contentType="letters"
            username="abc 332"
            use="secondary"
            size="md"
          />
          <RtAvatar
            contentType="letters"
            username="abc 332"
            use="tertiary"
            size="lg"
          />
        </div>

        <RtText typography="title-md-medium">ContentType</RtText>
        <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
          <RtAvatar
            contentType="figure"
            username="abc 332"
            use="primary"
            size="lg"
          />
          <RtAvatar
            contentType="letters"
            username="abc 332"
            use="secondary"
            size="lg"
          />
          <RtAvatar
            contentType="letters"
            username="Qwert Zxc"
            use="secondary"
            size="lg"
          />
          <RtAvatar
            contentType="letters"
            username="ASDF jkl"
            use="secondary"
            size="lg"
          />
        </div>

        <RtText typography="title-md-medium">Use</RtText>
        <div
          style={{
            display: 'flex',
            gap: 40,
            alignItems: 'center',
            flexWrap: 'wrap',
          }}
        >
          <RtAvatar
            contentType="figure"
            username="abc 331"
            use="primary"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 332"
            use="secondary"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 333"
            use="tertiary"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 334"
            use="quaternary"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 335"
            use="achromatic-ashy"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 336"
            use="achromatic-cloudy"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 337"
            use="ashy"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 338"
            use="cloudy"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 339"
            use="error"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 340"
            use="foggy"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 341"
            use="negative"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 342"
            use="neutral"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 343"
            use="notice"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 344"
            use="positive"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 345"
            use="success"
            size="lg"
          />
          <RtAvatar
            contentType="figure"
            username="abc 346"
            use="warning"
            size="lg"
          />
        </div>

        <RtText typography="title-md-medium">Radius</RtText>
        <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
          <RtAvatar
            username="abc 332"
            use="primary"
            size="lg"
            radius="primary"
          />
          <RtAvatar
            username="abc 332"
            use="secondary"
            size="lg"
            radius="secondary"
          />
        </div>

        <RtText typography="title-md-medium">ReadOnly</RtText>
        <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
          <RtAvatar
            username="abc 332"
            use="primary"
            size="lg"
            radius="primary"
            readOnly
          />
          <RtAvatar
            username="abc 332"
            use="secondary"
            size="lg"
            radius="secondary"
            readOnly
          />
        </div>

        <RtText typography="title-md-medium">imgSrc</RtText>
        <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
          <RtAvatar
            username="abc 332"
            use="primary"
            size="lg"
            radius="secondary"
            imgSrc="https://placehold.in/44x44@1x.png/dark"
            readOnly
          />
        </div>
      </RtFrame>
    </RtFrame>
  );
}